<template>
  <view>
    <view class="order-items">
      <view class="order-item" v-for="(item, index) in list" :key="index">
        <view class="order-item-top">
          <view class="order-item-top-left">{{ item.createTime }}</view>
          <view class="order-item-top-right" :class="item.status==0?'red':''">{{ item.status==0?'对账中':'已对账' }}</view>
        </view>
        <view class="order-item-bottom" v-for="(ele, idx) in item.orderInfoList" :key="idx">
          <img :src="ele.image" class="order-item-bottom-left" alt="" />
          <view class="order-item-bottom-right">
            <view class="order-item-bottom-right-1">{{ ele.storeName }}</view>
            <view class="order-item-bottom-right-2">
              <view class="order-item-bottom-right-2-left"
                >数量*{{ ele.cartNum }}</view
              >
              <view class="order-item-bottom-right-2-right">¥{{
                ele.price
              }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="fixedbtn flex flex-row justify-between u-fixed-bottom">
      <view class="btn background_red" @click="sub_draw"> 发起对账</view>
    </view>
    <ListFooter :loadtitle="loadtitle"></ListFooter>
  </view>
</template>

<script>
import { adminOrder, reconciliationApply } from "@/api/order.js";
import ListFooter from "../../components/listFooter/listFooter.vue";
export default {
  components: {ListFooter},
  data() {
    return {
      loading: false,
      loadend: false,
      loadtitle: "暂无数据",
      list: [],
      page: 1,
      limit: 20,
    };
  },
  onPullDownRefresh() {
    this.list = [];
    this.page = 1;
    this.loadend = false;
    this.getData();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onLoad() {
    this.getData();
  },
  onReachBottom: function () {
    this.page++;
    this.getData();
  },
  methods: {
    sub_draw() {
      reconciliationApply().then(res => {
        uni.showToast({
          title: '对账发起成功',
          icon: 'none'
        })
        uni.showModal({
                  title: "提示",
                  content: "对账发起成功，去查看列表",
                  success: function (res) {
                    if (res.confirm) {
                      uni.navigateTo({
                    url: '/subpageB/reconciliation_list/reconciliation_list'
                  })
                            }
                  },
                });
      })
    },
    getData() {
      if (this.loading) return;
      if (this.loadend) return;
      this.loading = true;
      this.loadtitle = "";
      uni.showLoading({
        title: "加载中...",
      });
      let data = {
        limit: this.limit,
        page: this.page,
        type: 9
      };
      adminOrder(data)
        .then((res) => {
          uni.hideLoading();
          let list = res.data.list;
          let loadend = list.length < this.limit;
          this.list = this.list.concat(list);

          this.loadend = loadend;
          this.loading = false;
          this.loadtitle = loadend ? "到底啦，没有数据了~" : "加载更多";
        })
        .catch((err) => {
          this.loading = false;
          this.loadtitle = "加载更多";
        });
    },
  },
};
</script>

<style lang="scss">
.order-items {
  padding: 0 24rpx 100rpx;
}
.black {
  color: #000 !important;
}
.red {
  color: #df4b43!important
} 
.order-item {
  background: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
  margin-top: 20rpx;
  &-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-left {
      font-size: 24rpx;
      font-weight: bold;
    }
    &-right {
      font-size: 24rpx;
    }
  }
  &-bottom {
    display: flex;
    margin-top: 10rpx;
    &-left {
      width: 100rpx;
      height: 100rpx;
    }
    &-right {
      display: flex;
      flex-direction: column;
      flex: 1;
      margin-left: 20rpx;
      justify-content: space-between;
      &-1 {
        font-size: 26rpx;
        color: #948c8c;
      }
      &-2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-left {
          font-size: 24rpx;
          color: #948c8c;
        }
        &-right {
          font-size: 24rpx;
          color: #df4b43;
        }
      }
    }
  }
}
.fixedbtn {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1rpx solid #d9d9d9;
  background-color: #fff;
  z-index: 999;
  padding-top: 20rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

  .btn {
    margin-top: 20rpx;
    width: 90%;
    margin-left: 5%;
    height: 90rpx;
    border-radius: 200px;

    text-align: center;
    display: flex;

    justify-content: center;
    align-items: center;
  }
}
</style>
